<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>系统迷航指南</title>
    <link rel="icon" th:href="@{/favicon.png}" type="image/png"/>
    <style>
        /* 继承主站风格 */
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Segoe UI', sans-serif;
        }

        /* 动态容器 */
        .error-box {
            text-align: center;
            padding: 2rem;
            background: rgba(255,255,255,0.95);
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            max-width: 600px;
            transform: scale(0);
            animation: popIn 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
        }

        /* 故障图标动画 */
        .error-icon {
            font-size: 8rem;
            margin: 1rem;
            display: inline-block;
            animation: float 3s ease-in-out infinite;
            filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
        }

        /* 动态提示语样式 */
        .dynamic-tip {
            font-size: 1.2rem;
            color: #e74c3c;
            margin: 1.5rem 0;
            min-height: 60px;
        }

        /* 操作按钮组 */
        .action-btns {
            display: grid;
            gap: 1rem;
            margin-top: 2rem;
        }

        .action-btn {
            padding: 12px 24px;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            background: #3498db;
            color: white;
            position: relative;
            overflow: hidden;
        }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(52,152,219,0.4);
        }

        /* 动画定义 */
        @keyframes popIn {
            0% { transform: scale(0); }
            60% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }
    </style>
</head>
<body>
<div class="error-box">
    <div class="error-icon">🤖🚧</div>
    <h2>啊哦，程序猿迷路了！</h2>

    <!-- 动态提示语区域 -->
    <div class="dynamic-tip" id="dynamicTip"></div>

    <div class="action-btns">
        <button class="action-btn" onclick="location.reload()">🔄 再试一次</button>
        <button class="action-btn" onclick="location.href='/'">🏠 返回安全区</button>
        <button class="action-btn" onclick="showSecret()">🐒 召唤管理员</button>
    </div>
</div>

<script>
    // 动态提示语库
    const errorTips = [
        "可能原因：程序员被咖啡烫伤了手",
        "检测到您的求知欲超过系统负荷！",
        "服务器正在举办冥想工作坊...",
        "警告：代码仓库发现野生BUG出没",
        "系统正在思考人生三大难题",
        "温馨提示：本错误页面由AI自动生成",
        "404 NOT FOUND：知识已逃逸至黑洞",
        "重要通知：此错误已被标记为可爱型",
        "警告：发现未经授权的脑电波访问",
        "系统提示：请用爱的眼光看待这个错误"
    ];

    // 随机提示语
    function getRandomTip() {
        const index = Math.floor(Math.random() * errorTips.length);
        document.getElementById('dynamicTip').innerHTML = `
                <div style="animation: tipFade 0.6s ease">
                    <span style="color:#2c3e50;">📌 本次故障诊断:</span><br>
                    ${errorTips[index]}
                </div>
            `;
    }

    // 彩蛋功能
    function showSecret() {
        const emojis = ['🚀','👾','🎮','💻','🍵'];
        const secret = document.createElement('div');
        secret.innerHTML = `
                <div style="margin-top:1rem;padding:1rem;background:#f1f1f1;border-radius:10px">
                    👽 管理员密语：<br>
                    "代码${emojis[Math.floor(Math.random()*5)]}是人类写给机器人的诗"
                </div>
            `;
        document.querySelector('.error-box').appendChild(secret);
    }

    // 初始化
    window.onload = () => {
        getRandomTip();
        setInterval(() => {
            document.querySelector('.error-icon').style.animation = 'none';
            setTimeout(() => {
                document.querySelector('.error-icon').style.animation = 'float 3s ease-in-out infinite';
            }, 10);
        }, 6000);
    }
</script>
</body>
</html>